<template>
  <article class="page">
    <headerbar>培训计划
      <!--<span @click="showMenu" class="head-btn-text" slot="btn">更多</span>-->
      <div v-if="isShowMenu" class="edit-menu-wrap" @click="hideMenu">
        <ul class="edit-menu">
          <li @click="startPlan">启动</li>
          <li @click="editPlan">编辑</li>
        </ul>
      </div>
      <div v-if="false" class="edit-menu-wrap">
        <ul class="edit-menu">
          <li @click="agreeAlert()">同意</li>
          <li @click="alert()">不同意</li>
        </ul>
      </div>
    </headerbar>
    <section class="frame-content-sub no-bg" v-if="data">
      <section class="inner-content pdv-9 pdh-4 inner-noborder">

        <div class="input-column-wrap">
          <div class="name">培训计划名称：</div>
          <div class="text-left input-value color-tip">{{data.trainingclass}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">办班单位：</div>
          <div class="text-left input-value color-tip">{{data.deptname}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训对象：</div>
          <div class="text-left input-value color-tip">{{data.text}}</div>
        </div>

        <div class="input-column-wrap">
          <div class="name">培训人数：</div>
          <div class="text-left input-value color-tip">{{data.number}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训期数：</div>
          <div class="text-left input-value color-tip">{{data.numberofperiods}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训天数：</div>
          <div class="text-left input-value color-tip">{{data.days}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训地点：</div>
          <div class="text-left input-value color-tip">{{data.div}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训时间：</div>
          <div class="text-left input-value color-tip">{{data.time}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训费用：</div>
          <div class="text-left input-value color-tip">{{data.trainmoney}}万</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">减少金额：</div>
          <div class="text-left input-value color-tip">{{data.jsje}}万</div>
        </div>
        <div class="input-column-wrap flex-start">
          <div class="name pdt-2">培训内容：</div>
          <div class="text-left input-value color-tip pdh-3">{{data.trainingcontent}}</div>
        </div>

        <div v-if="(data.type === '1' || data.type === '4') && checkFlag" @click="agreeAlert()" class="default-block-btn mgh-10">同意</div>
        <div v-if="(data.type === '1' || data.type === '4') && checkFlag" @click="alert()" class="default-block-btn mgh-10">不同意</div>

    </section>

      <div class="block" v-if="data.type < 2 && false">

        <div class="pdv-2"></div>
        <div class="radio-group">
          <cube-radio-group v-model="form.type" :options="typeOptions" :col-num="3" />
        </div>

        <div class="input-row-wrap">
          <div class="name pdh-5">请填写审批意见：</div>
          <div></div>
        </div>
        <div class="input-row-wrap pdh-2">
          <textarea v-model="form.content" placeholder="请填写审批意见" name="" cols="30" rows="10"></textarea>
        </div>
        <div @click="save" class="default-block-btn mgh-2">确认</div>

        <p class="pdv-2"></p>
      </div>

    </section>
  </article>
</template>

<script>
  import _ from 'lodash'
  import userInfo from '../personalcenter/userInfo'
  export default {
    data () {
      return {
        isShowMenu: false,
        data: {},
        form: {},
        typeOptions: [
          {label: '同意', value: 2},
          {label: '不同意', value: 3},
          {label: '取消', value: 4}
        ],
        userInfo: this.$store.state.userInfo,
        checkFlag: false
      }
    },
    created () {
      this.data = this.$store.state.trainingPlanDetail
      if (this.userInfo && this.userInfo.permissions) {
        if (this.userInfo.permissions.indexOf('planInfo:post/trainingPlanInfo/sp') > -1) {
          this.checkFlag = true
        }
      }
      this.loadData()
    },
    methods: {
      showMenu () {
        this.isShowMenu = true
      },
      hideMenu () {
        this.isShowMenu = false
      },
      startPlan () {
        this.$store.state.trainingPlanDetail = this.data
        this.$router.push({name: 'trainingPlanStart', query: {id: this.data.id}})
        this.hideMenu()
      },
      editPlan () {
        this.$store.state.trainingPlanDetail = this.data
        this.$router.push({name: 'trainingPlanAdd', query: {id: this.data.id}})
        this.hideMenu()
      },
      save () {
        let query = this.$route.query
        let params = {
          id: query.id,
          type: this.form.type
        }
        this.fetchService.trainingPlanInfoSaveOrUpdate(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.data.type = this.form.type
          this.addLog(query.id)
        })
      },
      check (type, checkOpinion) {
        // 计划状态：0计划填报、1计划审核中、2计划审核通过、3计划审核不通过、、4计划取消审核中、5计划取消审核通过、6计划取消审核不通过，1变成2,3；4变成5,6
        let query = this.$route.query
        let params = {
          id: query.id,
          type: type
        }
        this.fetchService.trainingPlanInfoSaveOrUpdate(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.addPlanLog(query.id, checkOpinion, type)
          this.loadData()
        })
      },
      addLog (id) {
        let params = {
          pxjhId: id,
          spyj: this.form.content,
          type: this.form.type
        }
        this.fetchService.trainingplanInfoLogSaveOrUpdateOfAll(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.tools.alert('操作成功')
        })
      },
      addPlanLog (id, spyj, type) {
        if (type === '2' || type === '5') {
          spyj = '同意'
        } else {
          spyj = '不同意'
        }
        let params = {
          pxjhId: id,
          spyj: spyj,
          spr: this.userInfo.id,
          sprxm: this.userInfo.nickname,
          type: this.form.type,
          hjmc: '培训计划审核'
        }
        this.fetchService.trainingplanInfoLogSaveOrUpdateOfAll(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.tools.alert('操作成功')
        })
      },
      loadData () {
        let query = this.$route.query
        let params = {
          id: this.$route.query.id,
          numberofperiods: query.numberofperiods
        }
        this.fetchService.trainingPlanInfo(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.data = _.extend(this.data, res.data)
        })
      },
      agreeAlert () {
        this.dialog = this.$createDialog({
          type: 'prompt',
          title: '审核',
          prompt: {
            value: '',
            placeholder: '请输入审核意见'
          },
          onConfirm: (e, promptValue) => {
            if (this.data.type === '1') {
              this.check('2', promptValue)
            } else if (this.data.type === '4') {
              this.check('5', promptValue)
            }
          }
        }).show()
      },
      alert () {
        this.dialog = this.$createDialog({
          type: 'prompt',
          title: '审核',
          prompt: {
            value: '',
            placeholder: '请输入审核意见'
          },
          onConfirm: (e, promptValue) => {
            if (this.data.type === '1') {
              this.check('3', promptValue)
            } else if (this.data.type === '4') {
              this.check('6', promptValue)
            }
          }
        }).show()
      }
    }
  }
</script>

<style scoped>

</style>
